// 患者列表
<template>
  <div>
   
   
      <span>
        <el-col :span="24">
          <el-form :inline="false" :model="listUser" label-width="110px" style="text-align:left;">
            <el-col :span="24" style="font-size:24px;margin:0px 0 10px 0;">
                基本信息
            </el-col>
            <el-col :span="24">       
              <el-col :span="6"> 
                <el-form-item label="姓名:">
                  <el-input v-model="listUser.name" placeholder="请输入姓名" :disabled="listType == 1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别:">
                  <el-select style="width:100%"  :disabled="listType == 1" v-model="listUser.gender" placeholder="请选择性别">
                    <el-option
                      v-for="item in sex"
                      :key="item.value"
                      :label="item.label"  
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄:">
                  <el-input v-model="listUser.age" :disabled="listType == 1" placeholder="请输入年龄"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="婚姻状况:">
                  <el-select style="width:100%" v-model="listUser.marriage" :disabled="listType == 1" placeholder="请选择婚姻状况">
                    <el-option
                      v-for="item in marriage"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="6">
                <el-form-item label="血型:">
                  <el-select style="width:100%" v-model="listUser.blood_type" :disabled="listType == 1" placeholder="请选择婚姻状况">
                    <el-option
                      v-for="item in blood_type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="国籍:">
                  <el-select v-model="listUser.country" :disabled="listType == 1" style="width:100%;" filterable placeholder="请输入可搜索国家">
                    <el-option
                      v-for="item in country"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="病人性质:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.nature" placeholder="请选择病人性质">
                    <el-option
                      v-for="item in nature"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item> 
              </el-col>
              <el-col :span="6">
                <el-form-item label="身份证号码:">
                   <el-input v-model="listUser.id_card" :disabled="listType == 1" placeholder="请输入身份找号码"></el-input>
                </el-form-item>
              </el-col>
            </el-col> 
            <el-col :span="24">
              
              <el-col :span="6">
                <el-form-item label="出生日期:">
                  <el-date-picker
                      style="width:100%;"
                      v-model="listUser.birthday"
                      type="date"
                      :disabled="listType == 1"
                      placeholder="选择生日">
                    </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="民族:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.nation" filterable placeholder="请选择民族">
                    <el-option
                      v-for="item in nation"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="媒介来源:">
                    <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.source" filterable placeholder="请选择媒介来源">
                    <el-option
                      v-for="item in source"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col> 
            <el-col :span="24" style="font-size:24px;margin:0px 0 10px 0;">
              补充信息
            </el-col>
            <el-col :span="24">
              <el-col :span="6"> 
                <el-form-item label="籍贯:">
                  <el-input v-model="listUser.native_place" :disabled="listType == 1" placeholder="请输入籍贯"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="移动电话:">
                  <el-input v-model="listUser.phone" :disabled="listType == 1" placeholder="请输入移动电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="紧急联系电话:">
                  <el-input v-model="listUser.fast_phone" :disabled="listType == 1" placeholder="请输入紧急联系电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="户籍地址:">
                  <el-input v-model="listUser.home_address" :disabled="listType == 1" placeholder="请输入户籍地址"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="6"> 
                <el-form-item label="职业:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.post" placeholder="请选择职业">
                    <el-option
                      v-for="item in post"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工作单位:">
                   <el-input v-model="listUser.company" :disabled="listType == 1" placeholder="请输入工作单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证件类型:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.card_type" placeholder="请选择证件类型">
                    <el-option
                      v-for="item in card_type"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证件号码:">
                   <el-input v-model="listUser.card_number" :disabled="listType == 1" placeholder="请输入证件号码"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="6"> 
                <el-form-item label="密级:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.secret_level" placeholder="请选择密级">
                    <el-option
                      v-for="item in secret_level"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学历:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.edu_level" placeholder="请选择学历">
                    <el-option
                      v-for="item in edu_level"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="生育状态:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.birth_status" placeholder="请选择生育状态">
                    <el-option
                      v-for="item in birth_status"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保险类型:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.insurance_no" placeholder="请选择保险类型">
                    <el-option
                      v-for="item in insurance_no"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="6"> 
                <el-form-item label="社会保障号:">
                  <el-input v-model="listUser.social_card" :disabled="listType == 1" placeholder="请输入社会保障号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否异地:">
                  <el-select style="width:100%" :disabled="listType == 1" v-model="listUser.is_nolocal" placeholder="请选择是否异地">
                    <el-option
                      v-for="item in is_nolocal"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <el-input type="textarea" :disabled="listType == 1" v-model="listUser.extra_json" placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-form-item label="照片:">
                <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :disabled="listType == 1"
                  :action="http + '/upload/image'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="24" v-for="(item,key) in listUser.family" :key="key">
                <el-col :span="24" style="font-size:24px;margin:0px 0 10px 0;"> 
                  家庭成员{{key+1}}
                </el-col>
                <el-col :span="24">
                    <el-col :span="7">
                      <el-form-item label="名字:">
                        <el-input v-model="item.name" :disabled="listType == 1" placeholder="请输入家庭成员名字"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="手机号:">
                        <el-input v-model="item.phone" :disabled="listType == 1" placeholder="请输入家庭成员手机号"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="家庭成员性别:">
                          <el-select style="width:100%" :disabled="listType == 1" v-model="item.gender" placeholder="请选择家庭成员性别">
                            <el-option
                              v-for="item in sex"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                      </el-form-item>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="7">
                      <el-form-item label="家庭成员生日:">
                      <el-date-picker
                          style="width:100%;"
                          :disabled="listType == 1"
                          v-model="item.birthday"
                          type="date"
                          placeholder="选择生日">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="家庭成员关系:">
                        <el-input v-model="item.relation" :disabled="listType == 1" placeholder="请输入家庭成员关系"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="家庭成员地址:">
                        <el-input v-model="item.address" :disabled="listType == 1" placeholder="请输入家庭成员地址"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" :disabled="listType == 1" @click="handleDeleteFamily(key)">删除成员</el-button>
                    </el-col>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="6">
                  <el-form-item label="添加家庭成员:">
                    <el-button type="primary" :disabled="listType == 1" @click="handleAddFamily">添加成员</el-button>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-col>
          </el-form>
        </el-col>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="listFlag = false">取 消</el-button>
        <el-button type="primary" @click="addSave()">确 定</el-button>
      </span>

 
  </div>
</template>

<script>
import {addSave,getProfileInfo,getSetStatus} from "@/api/patient"
import TopManu from "@/components/TopMenu";
import {Format} from "@/utils/transtionDate"
import FromList from "@/forComponents/fromList/fromList"
import {handleDictIndex} from "@/api/organization"
import {http} from "@/utils/server"
import {objectValueAllEmpty} from "@/utils/ifObject"
// import {} from ""
let that
export default {
  name:"patient",
  props:['listType','patient','handleClick','thatF'],
  data(){
    return {
        topmanuArry:[{
        class:'icon-his_60_pandian',
        name:'慢特病',
        key:'1',
      }],
 
      Inquire:{  //搜索数据
        keyword:"",
        status:"",
        created_at:[],
      },
      pickerOptions: {   //时间快捷选项
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData:[],
      listFlag:false, //弹窗开关
      listUser:{
        name:"", //姓名
        id_card:"", //身份证号
        gender:"", //性别
        age:"", //年龄
        phone:"", //手机号
        birthday:"", //生日
        marriage:"", //婚姻状态   1未知 2未婚 3已婚 4离异 5丧偶
        blood_type:"", //血型  @1 A型 @2 B型 @3 O型 @4 AB型 @5 未知
        rh_blood_type:"", //rh血型 @1阴性 @2 阳性  @3 未知	
        country:"CHN", //国家， 字典id 33，这里需要的是字典的name值
        nation:"", //民族 字典id 37，这里需要的是字典的name值
        address	:"", // 住址
        social_card:"", //社保卡号
        source:"", //媒介来源 40
        nature:"", //病人性质: 读取数据字典   4 取字典的id 值
        post:"", //职业
        company:"", //所在单位
        email:"", //邮箱
        native_place:"", //籍贯
        zip_code:"", //邮编
        tel:"", //家庭电话
        card_type:"",// 证件类型  : 读取数据字典   25 取字典的id 值
        card_number:"", //证件号码
        secret_level:"", //密级 @1 普通 @2 机密@3 绝密
        home_address:"", //户籍地址
        edu_level:"", //学历  数据字典为 39，取值为name	
        birth_status:"", //生育状态 @1 未育 @2 已育
        is_nolocal:"", //是否外地  @1 是  @2 否
        avatar:"", //照片地址
        fast_name:"", //紧急联系人
        fast_phone:"", //联系人手机号
        insurance_no:"", //保险类型
        family:[
         {
           name:"", //家庭成员姓名
           phone:"", //家庭成员手机号
           gender:"", //家庭成员性别
           birthday:"", //家庭成员生日
           relation:"", //家庭成员关系
           address:"", //家庭成员地址
         }
        ]
      },
      sex:[
        {
          value:1,
          label: '男'
        }, {
          value:2,
          label: '女'
        }
      ],
      marriage:[
        {
          value:1,
          label: '未知'
        },
        {
          value:2,
          label: '未婚'
        },
         {
          value:3,
          label: '已婚'
        },
         {
          value:4,
          label: '离异'
        },
         {
          value:5,
          label: '丧偶'
        }
      ],
      blood_type:[  //血型select
        {
          value:1,
          label: 'A型'
        },
        {
          value:2,
          label: 'B型'
        },
         {
          value:3,
          label: 'O型'
        },
         {
          value: 4,
          label: 'AB型'
        },
         {
          value: 5,
          label: '未知'
        }
      ],
      rh_blood_type:[ //RH血型select
        {
          value:1,
          label: '阴性'
        },
        {
          value:2,
          label: '阳性'
        },
         {
          value:3,
          label: '未知'
        }
      ],
      birth_status:[  //生育状态
        {
          value:1,
          label: '未育'
        },
        {
          value:2,
          label: '已育'
        }
      ],
      is_nolocal:[ //是否外地select
        {
          value:1,
          label: '是'
        },
        {
          value:2,
          label: '否'
        }
      ],
      country:[

      ],
      nature:[

      ],
      post:[

      ],
      card_type:[

      ],
      secret_level:[
        {
          value:1,
          name:"普通"
        },
        {
          value:2,
          name:"机密"
        },
         {
          value:3,
          name:"绝密"
        }
      ],
      edu_level:[

      ],  
      birth_status:[
        {
          value:1,
          name:"未育"
        },
        {
          value:2,
          name:"已育"
        }
      ],
      is_nolocal:[
        {
          value:1,
          name:"是"
        },
        {
          value:2,
          name:"否"
        }
      ],
      insurance_no:[

      ],
      nation:[

      ],
      source:[
        
      ],
      http:http,
      headers:{
        Authorization:"Bearer " + localStorage.getItem("token")
      },
      imageUrl:"",
      page:1,
      limit:8

    }
  },
  mounted(){
    that = this
    console.log("走这里来了吗",this.patient)
    this.listUser=this.patient
    that.getAll()
  },
  methods:{
   
    handcreate(item){
      console.log("123")
      this.$router.push({name:'chronicIdiopathicDisease'})
    },
   getProfileInfo(e){
     getProfileInfo({id_card:e})
     .then(res=>{
       res.data.family = res.data.get_family
       that.getAll()
       res.data.edu_level = parseFloat(res.data.edu_level)      
       that.listUser = res.data
     })
     .catch(e=>{
       that.$message({
        message:e.message,
        type: 'error'
      });
     })
   },
 
 
    //修改账户状态
    getSetStatus(e,q){
      getSetStatus({id:e,status:q})
      .then(res=>{
        this.$message({
          message:"修改状态成功",
          type: 'success'
        });
        that.tableData = []
      })
      .catch(e=>{
        this.$message({
          message:e.message,
          type: 'error'
        });
      })
    },
  //  删除家庭成员
   handleDeleteFamily(key){
     that.listUser.family.splice(key,1)
   },
   handleAddFamily(){
    that.listUser.family.push(
      {
        name:"", //家庭成员姓名
        phone:"", //家庭成员手机号
        gender:"", //家庭成员性别
        birthday:"", //家庭成员生日
        relation:"", //家庭成员关系
        address:"", //家庭成员地址
      }
    )
   },
   addSave(){
    let data = {
      name:"",
      id_card:"",
      gender:""
    }
    let list = {

    }
    Object.keys(data).forEach(key=>{
      data[key] = that.listUser[key]
    })
    Object.keys(that.listUser).forEach((item,key)=>{
      if(item != "get_family"){
        list[item] = that.listUser[item]
      }
    })
    that.listUser = list
    if(!objectValueAllEmpty(data)){
      this.$message({
          message:"请认真填写表单信息",
          type: 'error'
        });
      return false
    }
    addSave({...that.listUser})
    .then(res=>{
      that.$message({
        message:res.message,
        type: 'success'
      });

     
                            this.thatF.thatF.handleClick()
                             this.thatF.patient.show=false;
    //   that.listUser = that.$options.data.call(this).listUser
    //   that.listFlag = false
    
    })
    .catch(e=>{
      that.$message({
        message:e.message,
        type: 'error'
      });
    })
   },
  //  关闭弹窗
   handleClose(){
    that.listFlag = false
   },
  //  获取数据字典
   getAll(){
    that.handleDictIndex("33,4,22,25,39,13,37,40")
   },
  //  获取数据字典
   handleDictIndex(e){
     handleDictIndex({group_id:e})
     .then(res=>{
       console.log(res)
       if(res.data.length != 0){
         res.data.forEach(item=>{
           switch(item.id){
             case 4:
              that.nature = item.items
             break
             case 33:
              that.country = item.items
             break
             case 22:
              that.post = item.items
             break
             case 25:
              that.card_type = item.items
             break
             case 39:
              that.edu_level = item.items
             break
             case 13:
              that.insurance_no = item.items
             break
             case 37:
              that.nation = item.items
             break
             case 40:
              that.source = item.items
             break
           }
         })
       }
     })
     .catch(e=>{
      this.$message({
        message:e.message,
        type: 'error'
      });
     })
   },
   handleAvatarSuccess(res,file){
      that.imageUrl = URL.createObjectURL(file.raw);
      that.listUser.avatar = res.data.url
   },
   //限制图片
   beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
   },
  },
  components:{
    TopManu,
     FromList,
  },
}
</script>

<style lang='scss' scoped>
.demo-form-inline{
  display: flex;
}

.fromFlex{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>